/**
 * @Description:
 * @author 云离
 * @date: 2020-02-06
 */
import React, { Component } from 'react'
import {Icon, Menu} from 'antd'
import { connect } from 'react-redux'
import {withRouter} from 'react-router-dom'
import {ignoreMenu, urlMap} from '../main/view.config'

const { SubMenu } = Menu

const mapStateToProps = (state, ownProps) => {
    return {
        menus: state.main.menus
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
    }
}

const iconMap = {
    'fa fa-gear': 'setting',
    'fa fa-random': 'unordered-list',
    'fa fa-bar-chart': 'bar-chart'
}

const mapMenuIcon = {
    '账户管理': 'idcard',
    '结算管理': 'transaction'
}

class MyMenu extends Component {

    static propTypes = {
    }

    handleMenuItemClick = (menu, key, keyPath, domEvent) => {
        const {item} = menu
        const url  = urlMap[item.props.url] || item.props.url
        this.props.history.push(url)
    }

    render() {
        const {menus} = this.props
        return (
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['home']} onClick={this.handleMenuItemClick} style={{background: '#17245C'}}>
                <SubMenu
                    key={'index'}
                    title={
                        <span>
                                <Icon type={'home'} />
                                <span>主页</span>
                            </span>
                    }>
                    <Menu.Item key={'home'} url={'/index'}>管理首页</Menu.Item>
                </SubMenu>
                {menus.map(item => (
                    <SubMenu
                        key={item.menuId}
                        title={
                            <span>
                                <Icon type={iconMap[item.icon] || mapMenuIcon[item.menuName]} />
                                <span>{item.menuName}</span>
                            </span>
                        }>
                        {item.children.map(menu => {
                            if (ignoreMenu.includes(menu.url)) {
                                return null
                            } else {
                                return <Menu.Item key={menu.menuId} url={menu.url}>{menu.menuName}</Menu.Item>
                            }
                        })}
                    </SubMenu>
                ))}
            </Menu>
        );
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(withRouter(MyMenu))
